<template>
  <div class="CeremonyHall h100" v-loading="loading">
     <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> 
      <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
    </object>
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        label-width="120px"
        class="PageItem margintop20"
      >
        <el-row class="PageInfo">
          <i class="info-bar"></i>预约接运列表
        </el-row>
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="接运任务编码:">
            <el-input v-model="ruleForm.recCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名:">
            <el-input v-model="ruleForm.contact" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input v-model="ruleForm.contactPhone" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="　预约车型" prop="carTypeCode">
            <el-select v-model="ruleForm.carTypeCode" clearable filterable placeholder="请选择预约车型">
              <el-option
                v-for="item in dictionary.dicts.transport_car_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="任务状态:">
            <el-select
              v-model="ruleForm.taskStateCode"
              clearable
              filterable
              placeholder="请选择"
              class="w150"
            >
              <el-option
                v-for="item in dictionary.dicts.rec_task_state_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('search')">查询</el-button>
          <el-button type="primary" @click="add('search')">新增</el-button>
        </el-form-item>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
        >
          <el-table-column align="center" prop="recCode" label="接运任务编码" width="200"></el-table-column>
          <el-table-column prop="contact" align="center" label="联系人姓名" width="150"></el-table-column>
          <el-table-column prop="contactPhone" align="center" label="联系电话" width="120"></el-table-column>
          <el-table-column prop="arrivalTime" align="center" label="预约到达时间" width="150"></el-table-column>
          <el-table-column prop="carType" align="center" label="预约车型" width="200"></el-table-column>
          <el-table-column prop="purpose" align="center" label="车辆用途" width="120"></el-table-column>
          <el-table-column prop="address" align="center" label="接运地点" width="150"></el-table-column>
          <el-table-column prop="taskState" align="center" label="任务状态" width="150"></el-table-column>
          <el-table-column prop="source" align="center" label="来源" width="150"></el-table-column>
          <el-table-column prop="processState" align="center" label="操作" width>
            <template v-slot="scope">
              <el-button
                size="mini"
                @click="modify(scope.row)"
                v-if="(scope.row.taskState==='预约登记'&&scope.row.source==='客户端')||(scope.row.taskState==='预约登记'&&scope.row.source==='微信端')"
              >修改</el-button>
              <el-button
                size="mini"
                @click="Delete(scope.row)"
                v-if="(scope.row.taskState==='预约登记'&&scope.row.source==='客户端')&&!(scope.row.taskState==='已调度'||scope.row.taskState==='已出车'||scope.row.taskState==='已回车'||scope.row.taskState==='返空车')"
              >删除</el-button>
              <el-button
                size="mini"
                @click="see(scope.row)"
                v-if="scope.row.taskState==='已调度'||scope.row.taskState==='已出车'||scope.row.taskState==='已回车'||scope.row.taskState==='返空车'"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total"
          ></el-pagination>
        </p>
      </el-form>
      <el-dialog
        title="车辆接运任务信息查看"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        v-dialogDrag
      >
        <el-row class="PageInfo">
          <i class="info-bar"></i>车辆调度
        </el-row>
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="接运任务编码：">
                <el-input v-model="form.recCode" value="12344" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="接运状态：">
                <el-input v-model="form.taskState" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="信息来源：">
                <el-input v-model="form.source" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人姓名：">
                <el-input v-model="form.contact" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系电话：">
                <el-input v-model="form.contactPhone" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人类型：">
                <el-input :value="form.contactType" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="逝者姓名：">
                <el-input v-model="form.deadName" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="死亡原因：">
                <el-input v-model="form.deathCause" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="与联系人关系：">
                <el-select
                  v-model="form.relationCode"
                  clearable
                  filterable
                  class="w150"
                  :disabled="true"
               
                  placeholder
                >
                  <el-option
                popper-class="bgc"
                    v-for="item in dictionary.dicts.relationship_with_deceased"
                    :key="item.dataCode"
                    :label="item.dataText"
                    :value="item.dataCode"
                    :readonly="true"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预约车型：">
                <el-select
                  v-model="form.carTypeCode"
                  clearable
                  filterable
                  placeholder
                  :disabled="true"
                >
                  <el-option
                    v-for="item in dictionary.dicts.transport_car_type"
                    :key="item.dataCode"
                    :label="item.dataText"
                    :value="item.dataCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆用途：">
                <!-- <el-input v-model="form.purpose" :readonly="true"></el-input> -->
                <el-select
                  v-model="form.purposeCode"
                  clearable
                  filterable
                  placeholder
                  class="w150"
                  :disabled="true"
                >
                  <el-option
                    v-for="item in dictionary.dicts.transport_car_use"
                    :key="item.dataCode"
                    :label="item.dataText"
                    :value="item.dataCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预约到达时间：">
                <el-input v-model="form.arrivalTime" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="接运费：">
                <el-input v-model="form.recCharge" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="遗体到馆存放：">
                <el-input v-model="form.bodyDeposit" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="接运地址：">
                <el-input v-model="form.address" style="width:100%" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">
                <el-input v-model="form.remark" style="width:100%" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="DescriptionOfCharges">
            <h4>收费说明:</h4>
            <p>{{form.chargeRemark}}</p>
          </div>
          <el-row class="PageInfo">
            <i class="info-bar"></i>已选随车物品、服务
          </el-row>
          <el-row class="PageInfo">
            <el-table :data="form.recSelItem" border style="width: 100%">
               <el-table-column prop="itemName" label="收费项目" width="180"></el-table-column>
                  <el-table-column prop="itemPrice" label="单价" width="180"></el-table-column>
                  <el-table-column prop="itemNumber" label="数量"></el-table-column>
                  <el-table-column prop="itemUnit" label="单位"></el-table-column>
                  <el-table-column prop="discountCharge" label="优惠"></el-table-column>
                    <el-table-column prop="address" label="总金额">
                      <template slot-scope="scope">
                        <span
                          style="margin-left: 10px"
                        >{{TotalAmount(scope.row.itemPrice,scope.row.itemNumber,scope.row.discountCharge) }}</span>
                      </template>
                    </el-table-column>
            </el-table>
            
          </el-row>
          <el-row class="PageInfo">
            <i class="info-bar"></i>调度及接运信息
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="调度人姓名：">
                <el-input v-model="this.$store.getters.name"  :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调度时间：">
                <el-input v-model="form.dispatchTime" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="接运车辆:">
                <el-select
                  value
                  clearable
                  filterable
                  placeholder="接运车辆"
                  v-model="form.dispatchCar.recCarId"
                     :disabled="true"
                >
                  <el-option
                    v-for="item in dictionary.PickUpVehicle"
                    :key="item.id"
                    :label="item.carCode"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="接运司机：">
                    <el-select
                  v-model="form.recInfoDriver"
                  clearable
                  filterable
                  placeholder=""
                  class="w150"
                  multiple
                  :disabled="true"
              
                >
                  <el-option
                    v-for="item in dictionary.users.transport_task_driver_user"
                    :key="item.dataCode"
                    :label="item.fullName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
           
            </el-col>
            <el-col :span="6">
             <el-form-item label="　抬尸工">
                <el-select
                  v-model="form.recInfoPorter"
                  clearable
                  filterable
                  placeholder=""
                  multiple
                  class="w150"
                  :disabled="true"
            
                >
                  <el-option
                    v-for="item in dictionary.users.transport_task_porter"
                    :key="item.dataCode"
                    :label="item.fullName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出车时间：">
                <el-input v-model="form.name" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="回车时间：">
                <el-input v-model="form.name" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="PageInfo">
            <i class="info-bar"></i>现场使用随车物品、服务
          </el-row>
          <el-row class="PageInfo">
             <el-table :data="tableDatas" border style="width: 100%">
               <el-table-column prop="itemName" label="收费项目" width="180"></el-table-column>
                  <el-table-column prop="itemPrice" label="单价" width="180"></el-table-column>
                  <el-table-column prop="itemNumber" label="数量"></el-table-column>
                  <el-table-column prop="itemUnit" label="单位"></el-table-column>
                  <el-table-column prop="address" label="优惠"></el-table-column>
                    <el-table-column prop="address" label="总金额"></el-table-column>
            </el-table>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">返 回</el-button>
          <el-button type="primary" @click="PrintQRcode(form.id)">打印接运二维码</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getLodop } from "@/utils/lodopFuncs";
import * as Type from "@/api/service";
import * as user from "@/api/user";
export default {
  name: "CeremonyHall",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dictionary: {
        dicts: {},
        users: {}
      }, //字典
      type: [],
      form: {
        dispatchCar: {
          //接运车辆信息
          recId: 0,
          id: 0,
          recCarId: ""
        }
      },
      ruleForm: {
        //模糊查询有问题，暂时注释
        recCode: "",
        contact: "",
        contactPhone: "",
        carTypeCode: "",
        taskStateCode: ""
      },
      pager: {
        pageSize: 20,
        total: 1,
        currentPage: 1
      },
      tableData: [],
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnCeremonyHallSearch: true, //查询
        btnCeremonyHallExport: true //导出excel
      },
      tableDatas: [
       
      ]
    };
  }, //载入按钮
  mounted() {
     
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] =
        this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
    }
    this.onSubmit();
    var that = this;
    window.onresize = function() {
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      that.tableHeight = dom - search - 250;
    };
    user
      .getVehicleDictionary({
        dictTypeCodes: [
          "body_deposited_type",
          "transport_car_type",
          "rec_relation_type",
          "rec_source_type",
          "relationship_with_deceased",
          "transport_car_use",
          "rec_source_type",
          "rec_task_state_type"
        ],
        id: 0,
        serviceItemTypeCode: "use_in_rec_info",
        userRoleCodes: ["transport_task_driver_user", "transport_task_porter"]
      })
      .then(res => {
        // console.log(res.data, 999);
        this.dictionary = res.data;
      });
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      this.tableHeight = dom - search - 250;
    });
  },
  methods: {
    onSubmit(value) {
      this.loading = true;
      if (value) {
        this.pager.currentPage = 1;
      }
      var postData = {
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        ...this.ruleForm
      };
      if (this.ruleForm.businessType == 0) {
        postData.businessType = null;
      }
      //查询接口
      Type["VehicleSchedulingList"](postData)
        .then(response => {
          const { data } = response;
          if (!data) {
            this.loading = false;
            this.$message("数据读取失败");
            return;
          }
          this.tableData = data.list;
          this.pager = data.pager;
          this.loading = false;
          //   //数据读取成功
        })
        .catch(error => {
          this.$message(error);
          this.loading = false;
          this.tableData = [];
        });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pager.pagesize = size;
      alert(pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    },
    Delete({ id, version }) {
      Type.DeletePickupInformation(id, version).then(res=>{
         this.$message({
          message: res.message,
          type: 'success'
        })
        this.onSubmit();
      })
      
    },
    modify({ id }) {
      // 路由history模式刷新会导致页面id丢失，要重新登录点击修改才可以
      this.$router.push({
        name: "home.receiving.CarReservation",
        params: { id }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {
        dispatchCar: {
          //接运车辆信息
          recId: 0,
          id: 0,
          recCarId: ""
        }
      };
      console.log("关闭了");
    },
    see({ id }) {
      this.dialogVisible = true;
      Type["ModifyAppointmentInformation"](id).then(res => {
        let { data } = res;
        data.contactType =
          data.contactType === 0 ? "家属" : "承办人";
     
         //处理时间格式
        data.arrivalTime=data.arrivalTime.slice(0,data.arrivalTime.length-3)

        console.log(data,99999999)
        data.recSelItem.forEach(item=>{
           item.discountCharge = 0;
        })
        this.form = data;
      
        this.loadTransportCar(data.carTypeCode); //车型id暂时写死
      });
    },
      TotalAmount(itemPrice, itemNumber, discountCharge) {
      let a = itemPrice * itemNumber - discountCharge;
      return a.toFixed(2);
    },
    //根据车型加载车辆   //暂时写死
    loadTransportCar(code, oldCarId) {
      let load_this = this;
      let postData = {
        //车辆类型编码
        typeCode: code,
        oldCarId: oldCarId
      };
      Type["loadtransportcarwithtypecode"](postData)
        .then(response => {
          let result = response;
          const { data } = result;
          if (!data) {
            load_this.$message("加载信息出错.");
          }
          console.log(data, 777);
          //数据读取成功
          // load_this.car = data;
          this.dictionary.PickUpVehicle = data;
          this.$forceUpdate();
        })
        .catch(error => {
          load_this.$message(error);
        });
    },
    add() {
      this.$router.push({
        name: "home.receiving.CarReservation"
      });
    },
    PrintQRcode(id) {
      Type["PrintQRcode"](id).then(res => {
          let { data } = res;
        console.log(data);
        this.printServiceAgreement(data);
      });
    },
    printServiceAgreement(printData) {
      let this_print = this;
      let LODOP = getLodop();
      if (LODOP == null || !LODOP) {
        this_print.$.messager.alert(
          "系统提示",
          "您的浏览器不支持打印控件，请用IE重试或安装打印控件后重试"
        );
        return;
      }
      let recCode = `<p>${printData.recCode}</p>`;
      let contact = `<p>联系人:${printData.contact}</p>`;
      let contactPhone = `<p>联系人电话:${printData.contactPhone}</p>`;
      let deadCause = `<p>死亡原因:${printData.deathCause}</p>`;
      let deadName = `<p>逝者姓名:${printData.deadName}</p>`;
      let recOperationcode = printData.recCode;
      //设置字体
      LODOP.SET_PRINT_STYLE("FontSize", 11);
      //调用打印控件进行测试
      LODOP.ADD_PRINT_HTM(
        20,
        260,
        300,
        25,
        "<p style='font-size:20px;font-weight: bold;'>接运二维码打印</p>"
      );
      //打印协议
      LODOP.ADD_PRINT_BARCODE(50, 50, 200, 200, "QRCode", recOperationcode);
      LODOP.ADD_PRINT_HTM(50, 230, 200, 75, recCode);
      LODOP.ADD_PRINT_HTM(70, 230, 200, 25, contact);
      LODOP.ADD_PRINT_HTM(90, 230, 200, 25, contactPhone);
      LODOP.ADD_PRINT_HTM(110, 230, 200, 25, deadCause);
      LODOP.ADD_PRINT_HTM(130, 230, 200, 75, deadName);
      LODOP.PREVIEW();
    }, //获取打印服务协议数据
  }
};
</script>

<style scoped>
.w150 {
  width: 150px;
}

.w1230 {
  width: 72.5vw !important;
  min-width: 40px !important;
}
.DescriptionOfCharges {
  /* style="width:100vm; */
  widows: 100vm;
  height: 70px;
  background: #f0f0f0;
  border-left: 5px solid #a9c3de;
  padding-top: 20px;
  padding-left: 10px;
}
.DescriptionOfCharges > p {
  /* style="width:100vm; */
  margin-left: 30px;
  margin-top: 5px;
}

</style>
